<template>
  <QfPage title="楼盘点评">
    <template #hd>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label='审核状态:'>
          <el-select v-model="formInline.KeyWord" placeholder="全部">
            <el-option label="全部" value="全部" />
            <el-option label="未审核" value="未审核" />
            <el-option label="审核通过" value="审核通过" />
            <el-option label="审核未通过" value="审核未通过" />
          </el-select>
        </el-form-item>
        <div class="demo-date-picker" style="display:inline-block;">
          <div class="block" style="margin-top:-15px">
            <span>发布时间：</span>
            <el-date-picker v-model="a" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
              :default-time="defaultTime" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
          </div>
        </div>
        <el-form-item label="关键词:">
          <el-input placeholder="请输入关键词" v-model="formInline.publisher" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="qkon">清空</el-button>
        </el-form-item>
        <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
          添加
        </el-button>
      </el-form>
      <el-table :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column type="selection" width="30" />
        <el-table-column prop="_id" label="编号" width="220" />
        <el-table-column prop="issue" label="提问" width="400" />
        <el-table-column prop="state" label="审核状态" :filters="[
          { text: '解决', value: '解决' },
          { text: '未解决', value: '未解决' },
        ]" :filter-method="filterTag" />
        <el-table-column prop="username" label="用户" />
        <el-table-column prop="time" label="发布时间" sortable />
        <el-table-column prop="Operation" label="操作">
          <el-table-column label="Operations">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </template>
    <template #ft>本项目由千峰H2208陈天明出版</template>
  </QfPage>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-form label-position="left" label-width="100px" :model="formInline" style="max-width: 460px">
      <el-form-item label="用户" style="margin: 15px">
        <el-input v-model="formInline.name" />
      </el-form-item>
      <el-form-item label="提问" style="margin: 15px">
        <el-input v-model="formInline.region" />
      </el-form-item>
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">添加时间</span>
          <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :prefix-icon="customPrefix"
            value-format="YYYY-MM-DD" />
        </div>
      </div>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import link from "../../../api"
import { h, shallowRef } from 'vue'

const value1 = ref('')
const customPrefix = shallowRef({
  render() {
    return h('p', 'pre')
  },
})
const tableData = ref()
const drawer = ref(false)
const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
const filterTag = (value: string, row: any) => {
  return row.state === value
}
const handleDelete = async (index: number, row: any) => {
  await link('/api/consult/del/' + row._id, 'POST')
  const res: any = await link('/api/consult')
  tableData.value = res.data
}
const a = ref('');

(async () => {
  const res: any = await link('/api/consult')
  console.log(res)
  tableData.value = res.data
})();

const formInline = reactive({
  name: '',
  region: '',
  regions: '',
})
//添加
const submit = async () => {
  console.log(value1.value, formInline)
  const data = {
    issue: formInline.region,
    username: formInline.name,
    time: value1.value,
    state: formInline.regions
  }
  const res = await link('/api/consult/addconsult', 'POST', data)
  console.log(res)
  const ress: any = await link('/api/consult')
  tableData.value = ress.data;

}
//搜索功能
const onSubmit = () => {
  console.log('submit!')
  console.log(formInline.region)
  console.log(a.value)
  if (formInline.region == '') {
    return alert('审核状态不能为空')
  } else {
    formInline.region
  }
}
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>